<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-06 17:50:59
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-10-12 15:58:47
 * @FilePath: \cxl-h5\src\components\message\Index.vue
-->
<template>
    <section class="message-container">
        <section
            v-for="(item, index) in list"
            :key="item"
            :class="['message-item', item.active ? 'active' : '', item.className]"
            :style="{ top: item.top }"
        >
            <section :class="['message']">
                <section class="box">
                    <!-- <template v-if="item.type == 'success'">
                        <span class="iconfont icon-RectangleCopy1"></span>
                    </template>
                    <template v-else-if="item.type == 'warning'">
                        <span class="iconfont icon-RectangleCopy6"></span>
                    </template>
                    <template v-else-if="item.type == 'danger'">
                        <span class="iconfont icon-RectangleCopy6"></span>
                    </template>
                    <template v-else-if="item.type == 'error'">
                        <span class="iconfont icon-shanchu"></span>
                    </template>
                    <template v-else-if="item.type == 'info'">
                        <span class="iconfont icon-RectangleCopy2"></span>
                    </template> -->
                    <p>{{ item.content }}</p>
                </section>
            </section>
        </section>
    </section>
</template>

<script setup lang="ts">
import { reactive, watchEffect } from 'vue'
//接收来自父级的参数
const props = defineProps(['list'])
//信息列表
const list: any[] = reactive([])
//监听父级参数变化
watchEffect(() => {
    list.length = 0
    props.list.forEach((item: any) => {
        list.push(item)
    })
})
</script>

<style scoped lang="scss">
.message-item {
    transition: opacity 0.5s;
    opacity: 0;
    width: auto;
    position: absolute;
    top: 0rem;
    left: 50%;
    transform: translate(-50%, 0%);
    border-radius: var(--cxl-size-6);

    .iconfont {
        color: var(--cxl-color-white);
        margin-right: 0.5rem;
        font-size: var(--cxl-size-14);
    }
}
.message-item.active {
    opacity: 1;
    // transform: translate(-50%, 0%);
}

.success {
    background-color: var(--cxl-color-success);
}

.warning {
    background-color: var(--cxl-color-warning);
}

.danger {
    background-color: var(--cxl-color-danger);
}

.error {
    background-color: var(--cxl-color-error);
}
.info {
    background-color: var(--cxl-color-info);
}
.message {
    width: 100%;
    height: auto;
    margin-bottom: 1px;
    .box {
        height: auto;
        padding: var(--cxl-size-8) var(--cxl-size-16);
        box-sizing: border-box;
        font-size: var(--cxl-size-12);
        color: var(--cxl-color-white);
        display: flex;
        align-items: center;
        justify-content: center;
        p {
            white-space: nowrap;
            color: var(--cxl-color-white);
        }
    }
}
</style>
